import React, { Component } from 'react'
import { Button, Checkbox, DatePicker, InputItem, List, Picker, Toast } from 'antd-mobile'
import { hashHistory, Link } from 'react-router'
import { ReturnHeader } from '../header'
import moment from 'moment'
import { createForm } from 'rc-form'

const AgreeItem = Checkbox.AgreeItem
class Authentication extends Component{
  constructor(props) {
    super(props)
  }

  render() {
    const maxDate = moment().utcOffset(8)
    const minDate = moment('1920-01-01 +0800', 'YYYY-MM-DD Z').utcOffset(8)

    const { getFieldProps } = this.props.form

    return(
      <List className="rt-authention-list">
        <ReturnHeader title="实名认证"/>
        <div className="rt-authention-step">
          <div className="rt-authention left">
            <span className="rt-number">1、</span>
            <span className="re-des">实名认证</span>
          </div>
          <div className="rt-authention right">
            <span className="rt-number">2、</span>
            <span className="re-des">合格投资者确认</span>
          </div>
        </div>
        <div className="rt-authention-jd">
          <div className="rt-authention-tu left"></div>
          <div className="rt-authention-line active"></div>
          <div className="rt-authention-tu right active"></div>
        </div>

        <InputItem
          className="rt-authention-padding"
          clear
          placeholder="请输入真实姓名"
          {...getFieldProps('realname', {
            initialValue: '',
          })}
        />

        <DatePicker
          mode="date"
          title="选择日期"
          extra="请选择出生年月"
          {...getFieldProps('birthDate', {
            initialValue: '',
          })}
          minDate={minDate}
          maxDate={maxDate}
        >
          <List.Item className="rt-authention-date"></List.Item>
        </DatePicker>

        <InputItem
          className="rt-authention-padding"
          {...getFieldProps('idNumber', {
            initialValue: '',
          })}
          maxLength={18}
          minLength={18}
          clear
          placeholder="请输入身份证号码"
        />

        <InputItem
          className="rt-authention-padding"
          {...getFieldProps('employer', {
            initialValue: '',
          })}
          clear
          placeholder="请输入所属公司"/>

        <Picker
          extra="请选择投资额度意向"
          data={[{value: '10000', label: '1万'}, {value: '100000', label: '10万'}, {value: '1000000', label: '100万'}, {value: '10000000', label: '1000万'}]}
          {...getFieldProps('investAmount', {
            initialValue: '',
          })}
          cols={1}>
          <List.Item
            arrow="down"
            className="rt-authention-select"
          />
        </Picker>
          
        <AgreeItem
          className="rt-authention-agree"
          {...getFieldProps('agreement', {
            initialValue: false,
            valuePropName: 'checked',
          })}
        >
          我已阅读并同意
          <Link>
            《实名认证条款》
          </Link>
        </AgreeItem>

        <Button type="primary" onClick={(e)=>this.nextStep()} className="rt-register-btn">下一步</Button>
              
      </List>  
    )
  }

  nextStep() {
    const { getFieldProps, getFieldValue } = this.props.form
    let realname = getFieldValue('realname')
    if (!realname) {
      Toast.fail('请输入姓名', 1.2)
      return
    }
    let birthDate = getFieldValue('birthDate')
    if (!birthDate) {
      Toast.fail('请选择出生年月', 1.2)
      return
    }
    birthDate = moment(birthDate).format('YYYY-MM-DD')
    
    let idNumber = getFieldValue('idNumber')
    if (!idNumber) {
      Toast.fail('请输入身份证号码', 1.2)
      return
    }
    let employer = getFieldValue('employer')
    if (!employer) {
      Toast.fail('请输入所属公司', 1.2)
      return
    }
    let investAmount = getFieldValue('investAmount')
    if (!investAmount) {
      Toast.fail('请选择投资额度意向', 1.2)
      return
    }
    let agreement = getFieldProps('agreement')
    if (!agreement.value) {
      Toast.fail('请先勾选阅读协议', 2)
      return
    }

    let data = {
      realname,
      birthDate,
      idNumber,
      employer,
      investAmount
    }
    hashHistory.push({
      pathname: '/confirm',
      query: data,
    })
  }
}

export default createForm()(Authentication)